<template>
  <div class="detail-box">

    <div class="banner-box" ref="banner">
      <!--轮播-->
      <banner :listImg="goodsInfo.goodsImgs" :type="0"></banner>
    </div>
    <div class="discribtion-box">
      <div class="name-distance" style="width: 60%; float: left; text-align: left">
        <span class="name">{{goodsInfo.goodsName}}</span>
      </div>
      <div class="price-left" style="font-size: 1rem; width: 40%;float: right;text-align: right">
        <span style="color: #d44242;">￥{{Number(goodsInfo.shopPrice).toFixed(2)}} </span>元/瓶
      </div>
      <div class="summary" :class="{ato:flexible}">{{goodsInfo.goodsBrief}}</div>
      <!--<div class="flexible" @click="flexible=!flexible">-->
      <!--<i class="arrow-down" :class="{up:flexible}"></i>-->
      <!--<span v-if="!flexible">展开</span>-->
      <!--<span v-else>收起</span>-->
      <!--</div>-->
      <div class="price-box">

        <div class="price-right" style="width: 100%">
          <!--<span>库存：{{goodsInfo.goodsStock}}</span>-->
          <span >月销：{{goodsInfo.saleCount + (num==null?0:num)}}</span>
        </div>
      </div>
    </div>
    <!--商品参数-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">商品参数</span>
      </div>
      <div class="argument-box">
        <p>品牌：{{goodsInfo.brandId}}</p>
        <p>酒精度：14% vol</p>
        <p>规格：{{goodsInfo.goodsSpec}}</p>
        <p>许可证号：{{goodsInfo.licence}}</p>
      </div>
    </div>
    <!--商品介绍-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">商品介绍</span>
      </div>
      <div class="text-discribtion" v-html="goodsInfo.goodsDesc">
      </div>
      <!--<p class="text-discribtion" style="margin-top:5px;padding:10px;"> 注：本款产品代理商仅提供送货上门服务，不提供侍酒服务</p>-->
      <img :src="sourceUrl+tag.imgUrl" v-for="(tag,index) in goodsInfo.goodsImgs" v-if="tag.type==1" class="detail-img"/>
    </div>
    <!-- 评论-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">买家评论</span>
        <!--评论标签-->

        <div class="more-info">
          <router-link :to="'/usercomments?id='+goodsInfo.id+'&type=1'">
            <span>查看全部</span> <i class="arrow-right"></i>
          </router-link>
        </div>
      </div>
      <!--<ul class="user-comment">-->
        <!--<li v-for="(tag,index) in userComment">{{tag}}</li>-->
      <!--</ul>-->

      <div class="cb-content">
        <!--显示1条用户评论-->
        <div class="user-box" v-show="isShow">
          <div class="avatar-name">
            <div class="user-avatar">
              <img :src="pinglun.headImg" alt="">
            </div>
            <span class="user-name">{{pinglun.nickName}}</span>
          </div>
          <div class="user-text">
            {{pinglun.content}}
          </div>
        </div>
        <div class="user-box" v-show="!isShow" style="padding: 10px;border-top: solid 1px #eee">
          暂无评论
        </div>
      </div>
    </div>
    <!--页面底部-->
    <div class="cur-footer" v-if="true">
      <div class="row" v-if="!isReplenishment">
        <span @click="addCart()" v-if="!isActivity">加入购物车</span>
        <span @click="buyNow()">立即购买</span>
      </div>
      <div class="row" v-if="isReplenishment">
        <span @click="addCart()" >加入进货单</span>
        <span @click="buyNow()">进货</span>
      </div>
    </div>
    <div class="cur-footer" v-if="false">
      <div class="row">
        <span>
          <img src="../../assets/images/bh.png" alt="">补货</span>
      </div>
    </div>
    <!--加入购物车弹窗-->
    <div class="pop-selecte" :class="{slidePop:showPop}">
      <div style="height:100%;" @click="closeAddCarPop()"></div>
      <div class="selecte-bg">
        <div class="product-info">
          <div class="p-left">
            <img :src="sourceUrl+goodsInfo.goodsImg" alt="">
          </div>
          <div class="p-right">
            <p class="price">￥{{calPrice}}   <span style="color: black">（{{goodsInfo.goodsUnit}}瓶/件）</span></p>
            <!--<p>库存88888件</p>-->
            <!--<p>已选 珍藏369 <sup>。</sup></p>-->
          </div>
        </div>
        <div class="buy-num-box">
          <div class="bnb-left">
            <span>购买数量</span>
          </div>
          <div class="bnb-right">
            <img src="../../assets/images/minus_icon.png" alt="" @click="minusNum()">
            <input id="buynum" type="number" onkeyup="value=value.replace(/[^\d{1,}]/g,'')" :value="buyNum"
                   @change="changedValue()"/>
            <img src="../../assets/images/add_icon.png" alt="" @click="addNum()"/>
          </div>
        </div>
        <!--canvas 计算文字宽度-->
        <canvas id="canvas" style="display: none;"></canvas>

        <div class="confirm-btn">
          <button @click="confirmBtn()">确定</button>
        </div>
      </div>
    </div>
    <!--提示弹窗-->
    <TextPop v-if="textPop" textPop="添加成功"></TextPop>
    <!--回首页-->
    <go-home></go-home>
  </div>
</template>

<script>
  import Banner from '../public/banner.vue'
  import global from '../public/global.vue'

  export default {
    name: 'sommelierDetail',
    components: {
      "banner": Banner,
    },
    data() {
      return {
        listImg: [
          {url: ""},
        ],
        flexible: false,
        userComment: ["性价比高", "口感优良纯正", "很好喝"],//用户评论标签内
        textPop: false, //提示弹窗
        showPop: false, //加入购物车弹窗
        buyNum: 1,//购买数量
        goodsInfo: {},//商品详情
        pinglun: {},//评论
        isShow: false,
        sourceUrl: global.sourceUrl,//图片前缀
        num: '',//销量
        calPrice: 0,//计算的价格
        isReplenishment:false,//是否从进货页面进入
        isActivity:false,
        isUpgradePatch:false,

      }
    },
    methods: {
      //加入购物车
      addCart() {
        //do sth is here
        this.showPop = true;

      },
      //购物车确定按键
      confirmBtn() {
        let params = new URLSearchParams();
        params.append('goodsId', this.goodsInfo.id);
        params.append('goodsNumber', this.buyNum);
        var uid = global.getCookie("uid")
        params.append("uid", uid);
        if(this.isReplenishment==1){
          params.append("type",1);//补货购物车
        }else{
          params.append("type",0);//普通购物车
        }
        this.$http({
          url: global.apiUrl + '/shoppingCart/addToShoppingCart',
          method: 'post',
          data: params,
        }).then(res => {
          console.log(res);
          this.textPop = true;
          this.closeAddCarPop();
          setTimeout(() => {
            this.textPop = false;
          }, 1000)
        }).catch(function (err) {
          console.error(err);
        });
      },
      //立即购买
      buyNow() {
        let uid = this.$route.query.uid;
        let id = this.$route.query.pid;
        let level = this.$route.query.level;
        let name = this.$route.query.name;
        let price = this.goodsInfo.shopPrice;
        let isReplenishment = this.isReplenishment
        //console.log(uid, id, price,level);
        this.$router.push({
          name: 'buyNow',
          params: {
            uid: uid,
            id: id,
            level: level,
            price: price,
            type: "goods",
            isReplenishment:isReplenishment,
            name:name,
          }
        })
      },
      //数量加
      addNum() {
        this.buyNum++;
        this.calPrice = (this.buyNum * this.goodsInfo.shopPrice * this.goodsInfo.goodsUnit).toFixed(2)
        this.setWordWidth();
      },
      //数量减
      minusNum() {
        if (this.buyNum > 1) {
          this.buyNum--;
        }
        this.calPrice = (this.buyNum * this.goodsInfo.shopPrice * this.goodsInfo.goodsUnit).toFixed(2)
      },
      //监听buynum变化
      changedValue() {
        this.buyNum = document.getElementById('buynum').value;
        this.setWordWidth();
      },
      //关闭购物车弹窗
      closeAddCarPop() {
        this.showPop = false;
      },
      //设置文字宽度
      setWordWidth() {
        let c = document.getElementById('canvas');
        let ctx = c.getContext("2d");
        let txt = document.getElementById('buynum').value;
        let wdh = ctx.measureText(txt).width;
        document.getElementById('buynum').style.width = Math.ceil(wdh + 20) + "px";
      },
    },
    //项目创建完成
    created: function () {
      console.log(this);
      document.title = "商品详情";
      let self = this;
      let url = global.apiUrl;
      let pid = this.$route.query.pid;
      let isReplenishment = this.$route.query.isReplenishment;
      if(isReplenishment==1){
        this.isReplenishment=true
      }
      console.log(this.isReplenishment)
      this.$http.get(url + '/goods/getGoodsDetail', {
        params: {
          id: pid,
        },

      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.goodsInfo = res.data.data;
          let pics = res.data.data.goodsImg.split(',');
          pics.forEach((val, i) => {
            this.listImg[i].url = url + '/' + pics[i];
          })
          this.calPrice = (res.data.data.shopPrice * res.data.data.goodsUnit).toFixed(2)
          console.log(this.listImg)
          if(res.data.data.isActivity==1){
            this.isActivity = true
          }
          if(res.data.data.upgradePatch>0){
            this.isActivity = true
          }
        }
      }).catch(function (err) {
        console.error(err);
      });
      //获取销量
      self.$http.get(url + '/goods/getGoodsNum?id=' + pid).then(res => {
        self.num = res.data.data;
      })

      //获取评论
      self.$http.get(url + '/goods/getGoodsEvaluate?id=' + pid).then(res => {
        if (res.data.data != "") {
          self.pinglun = res.data.data[0];
          self.isShow = true;
        }

      })


      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId",uid);
        setTimeout(() => {
          window.location.href="http://www.yingla9.com/dist/#/goodsDetail?pid="+pid;
        }, 300)

      }
      if(window.localStorage.getItem("shareId")!=null){
        global.bindRelation(window.localStorage.getItem("shareId"),this)
      }
      let text="http://www.yingla9.com/dist/#/goodsDetail?pid="+pid+"&uid="+window.localStorage.getItem("uid");
      global.wxShare("http://www.yingla9.com/dist/#/goodsDetail?pid="+pid, "商品详情", text,self);
    },
    //DOM挂载完毕
    mounted() {
      this.$nextTick(function () {
        //设置图片高度=设备宽度
        let width = document.body.clientWidth;
        setTimeout(()=>{
          this.$refs.banner.style.height = width + 'px';
        },100)
        let url = global.apiUrl;
        let id = this.$route.query.pid;
        let self = this;

      })
    },
    updated: () => {

    },
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .detail-box {
    padding-bottom: 58px;
  }

  .detail-box {
    background: #f3f3f3;
    .banner-box {
      position: relative;
      width: 100%;
      height: 15rem;

    }
    .discribtion-box {
      width: 100%;
      padding: 10px;
      background: #fff;
      margin-bottom: 10px;
      .name-distance {
        /*line-height: 2rem;*/
        .name {
          font-size: 1rem;
          font-weight: bold;
        }
      }
      .summary {
        width: 100%;
        height: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: 0.8rem;
        color: #aaa;
      }
      .flexible {
        width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: right;
        font-size: 0.9rem;
        color: #777;
        .arrow-down {
          display: inline-block;
          width: 0.6rem;
          height: 0.6rem;
          border-left: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          margin-right: 0.5rem;
          transform: rotateZ(-45deg);
        }
        .up {
          transform: rotateZ(135deg);
          vertical-align: text-bottom;
        }
        span {
          vertical-align: middle;
        }
      }
      .ato {
        display: block;
        height: auto;
      }
      .price-box {
        width: 100%;
        /*height: 2.5rem;*/
        /*line-height: 3.5rem;*/
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
        .price-left, .price-right {
          width: 50%;
        }
        .price-left {
          span {
            font-size: 1rem;
            color: #d44242;
          }
        }
        .price-right {
          text-align: right;
          white-space: nowrap;
          span {
            font-size: 0.8rem;
            color: #aaa;
            letter-spacing: -1px;
            margin-left: 10px;
          }
        }
      }
    }

    .content-box {
      width: 100%;
      /*padding: 0 10px;*/
      background: #fff;
      margin-bottom: 10px;
      .sub-head {
        width: 100%;
        padding: 15px 10px 5px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        .b-l {
          display: inline-block;
          height: 16px;
          line-height: 16px;
          padding-left: 5px;
          border-left: 4px solid #D44242;
          font-size: 1rem;
        }
        .more-info {
          line-height: 19px;
          a {
            font-size: 0.9rem;
            color: #aaa;
            span {
              vertical-align: top;
            }
            .arrow-right {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-top: 2px solid #aaa;
              border-right: 2px solid #aaa;
              margin-left: -4px;
              transform: rotateZ(45deg) scale(0.6);
            }
          }
        }

      }
      .cb-content {
        width: 100%;
        padding: 0 10px;
        /*border-top: 1px solid #ddd;*/

      }
      /*商品参数*/
      .argument-box {
        width: 100%;
        padding: 0 10px;
        line-height: 1.5rem;
        p {
          font-size: 0.8rem;
          color: #aaa;
        }
      }
      /*商品介绍*/
      .text-discribtion {
        padding: 0 10px;
        font-size: 0.8rem;
        color: #aaa;
      }
      /*评论*/
      .user-comment {
        width: 100%;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          height: 1.5rem;
          line-height: 1.5rem;
          font-size: 0.8rem;
          color: #fff;
          background: #FF7575;
          text-align: center;
          margin-left: 10px;
          margin-bottom: 10px;
          border-radius: 30px;
          padding: 0 10px;
        }
      }
      /*显示1条用户评论*/
      .user-box {
        width: 100%;
        padding-bottom: 10px;
        .avatar-name {
          width: 100%;
          margin: 10px auto;
          .user-avatar {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            background: #D44242;
            border-radius: 50%;
            vertical-align: middle;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .user-name {
            display: inline-block;
            font-size: 0.9rem;
            font-weight: bold;
            vertical-align: middle;
          }
        }
        .user-text {
          font-size: 0.8rem;
          color: #aaa;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }

    /*页面底部*/
    .cur-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 58px;
      border-top: 1px solid #eee;
      background: #fff;
      .row {
        width: 100%;
        text-align: center;
        span {
          display: inline-block;
          width: 35%;
          padding: 8px 0;
          margin: 0 5%;
          border-radius: 40px;
          background: #D85353;
          font-size: 1rem;
          color: #fff;
          margin-top: 10px;
          img{
            width:24px;
            margin-right:10px;
          }
        }
      }
    }
    /*加入购物车弹窗*/
    .pop-selecte {
      position: fixed;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      z-index: 10;
      transition: 0.3s all;
      .selecte-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        .product-info {
          padding: 0 30px;
          display: flex;
          .p-left {
            width: 35%;
            img {
              width: 80px;
              height: 80px;
              border: 2px solid #fff;
              border-radius: 6px;
              margin-top: -20px;
            }
          }
          .p-right {
            p {
              line-height: 0.9rem;
              font-size: 0.7rem;
              color: #aaa;
            }
            .price {
              font-size: 1rem;
              color: #FB4343;
              margin: 10px auto 5px;
            }
          }
        }
        .buy-num-box {
          margin-top: 20px;
          height: 60px;
          line-height: 60px;
          padding: 0 30px;
          display: flex;
          justify-content: space-between;
          .bnb-left {
            width: 50%;
            text-align: left;
            border-top: 2px solid #ddd;
            font-size: 0.9rem;
            color: #666;
          }
          .bnb-right {
            width: 50%;
            text-align: right;
            border-top: 2px solid #ddd;
            img {
              width: 20px;
              vertical-align: middle;
            }
            outline: none;
            input {
              width: 28px;
              vertical-align: middle;
              border: none;
              outline: none;
              text-align: center;
              padding: 0 4px;
            }
          }
        }
        .confirm-btn {
          width: 100%;
          height: 50px;
          text-align: center;
          margin-top: 30px;
          border-top: 1px solid #eee;
          button {
            margin: 0;
            padding: 0;
            width: 80%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-top: 10px;
            font-size: 1rem;
            font-weight: 300;
            color: #fff;
            background: #D85353;
            border-radius: 30px;
            border: none;
            outline: none;
          }
        }
      }
    }
    .slidePop {
      top: 0;
    }
    .detail-img {
      width: 100%;
    }
  }
</style>
